<template>
  <z-paging ref="paging" v-model="data.notifyList" @query="getNotifyList" refresher-enabled>
    <view class="c-pd">
      <view class="search-container c-pd bg-white c-br">
        <view class="mb-3 flex items-center">
          <text class="mr-6">通知状态</text>
          <van-button
            size="small"
            type="default"
            class="mr-2"
            @click="
              () => {
                data.popupType = 1;
                data.commonList = data.stateList;
                data.showPopup = true;
              }
            "
            >{{ data.notifyState ? ENotifyState[data.notifyState as number] : '请选择通知状态' }}</van-button
          >
        </view>
        <view class="mb-3 flex items-center">
          <text class="mr-6">事故类型</text>
          <van-button
            size="small"
            type="default"
            @click="
              () => {
                data.popupType = 2;
                data.commonList = data.typeList;
                data.showPopup = true;
              }
            "
            class="mr-2"
            >{{ data.notifyType ? EAlarmType[data.notifyType as keyof typeof EAlarmType] : '请选择事故类型' }}</van-button
          >
        </view>
        <view class="mb-3 flex items-center">
          <text class="mr-6">发生时间</text>
          <van-button
            @click="
              () => {
                data.timeSelect = 1;
                data.timeShow = true;
              }
            "
            size="small"
            type="default"
            class="mr-4"
            >{{ data.beginTime ? data.beginTime : '开始时间' }}</van-button
          >
          <text>—</text>
          <van-button
            @click="
              () => {
                data.timeSelect = 2;
                data.timeShow = true;
              }
            "
            size="small"
            type="default"
            class="ml-4"
            >{{ data.endTime ? data.endTime : '结束时间' }}</van-button
          >
        </view>
        <view class="mb-3 flex items-center">
          <text class="mr-4">事故发生地</text>
          <van-search
            :value="data.address"
            @change="
              (e: any) => {
                data.address = e.detail;
              }
            "
            placeholder="请输入事故发生地"
            clearable
          />
        </view>
        <view class="flex items-center justify-around">
          <van-button size="small" type="default" class="mr-3 w-46%" block @click="repeatChange">重置</van-button>
          <van-button size="small" type="primary" class="w-46%" block @click="searchChange">查询</van-button>
        </view>
      </view>
      <view v-for="(item, index) in data.notifyList" @click="goToDetail(item)" :key="index" class="mt-3 c-pd c-br bg-white">
        <view class="mb-2">
          <van-row>
            <van-col span="7">事故发生地：</van-col>
            <van-col span="13">{{ item.address || '-' }}</van-col>
            <van-col span="4">
              <van-tag type="primary" v-if="item.notifyState === 1">通知中</van-tag>
              <van-tag type="success" v-if="item.notifyState === 10">通知成功</van-tag>
              <van-tag type="danger" v-if="item.notifyState === -1">通知失败</van-tag>
              <van-tag type="warning" v-if="item.notifyState === 5">部分成功</van-tag>
            </van-col>
          </van-row>
        </view>
        <view class="mb-2">
          <van-row>
            <van-col span="6">事故类型：</van-col>
            <van-col span="18">{{ EAlarmType[item.notifyType as keyof typeof EAlarmType] || '-' }}</van-col>
          </van-row>
        </view>
        <view class="mb-2">
          <van-row>
            <van-col span="6">发生时间：</van-col>
            <van-col span="18">{{ item.createDate || '-' }}</van-col>
          </van-row>
        </view>
      </view>
    </view>
    <van-popup
      safe-area-tab-bar
      position="bottom"
      custom-style="height: 40%;"
      :show="data.timeShow"
      close-on-click-overlay
      @click-overlay="
        () => {
          data.timeShow = false;
        }
      "
    >
      <van-datetime-picker title="选择日期" @cancel="onClose(1)" type="date" :value="data.currentDate" @confirm="onTimeConfirm" />
    </van-popup>
    <van-popup position="bottom" custom-style="height: 40%;" :show="data.showPopup" @close="onClose(2)">
      <van-picker show-toolbar confirm-button-text="确认" cancel-button-text="取消" value-key="text" :columns="data.commonList" @confirm="onPickerChange" @cancel="onPickerCancel" :title="data.popupType === 1 ? '选择通知状态' : '选择事故类型'" />
    </van-popup>
  </z-paging>
</template>

<script setup lang="ts">
import { navigate } from '@/utils/navigate';
import Tools from '@/utils/tools';
import HomeRequest from '@/request/homeRequest';
import { EAlarmType, ENotifyState } from '@/enum/index';
import useAppStore from '@/store/modules/app';

interface IData {
  notifyState: number | string;
  notifyType: string | number;
  beginTime: string;
  endTime: string;
  address: string;
  pages: {
    pageNo: number;
    pageSize: number;
    totalPage: number;
  };
  pickerType: string;
  pickerCommunityShow: boolean;
  stateList: { text: string; value: number }[];
  typeList: { text: string; value: string }[];
  currentDate?: { date: string[]; time: string[] };
  timeSelect: number;
  notifyList: IGetNotifyDetail[];
  beeperId: number;
  timeShow: boolean;
  showPopup: boolean;
  popupType: number;
  commonList: { text: string; value: any }[];
}

const store = useAppStore();

const data = reactive<IData>({
  notifyState: '',
  notifyType: '',
  beginTime: '',
  endTime: '',
  address: '',
  pages: {
    pageNo: 1,
    pageSize: 20,
    totalPage: 1,
  },
  pickerCommunityShow: false,
  pickerType: 'state',
  timeSelect: 1,
  stateList: [
    { text: '通知中', value: 1 },
    { text: '通知成功', value: 10 },
    { text: '通知失败', value: -1 },
    { text: '部分成功', value: 5 },
  ],
  typeList: [],
  notifyList: [],
  beeperId: store.$state.beeperId,
  timeShow: false,
  showPopup: false,
  popupType: 1,
  commonList: [],
});

const paging = ref();

onLoad(() => {
  data.typeList = Object.entries(EAlarmType).map(([value, text]) => ({
    text,
    value: value as EAlarmType,
  }));
});

const getNotifyList = (pageNo: number, pageSize: number) => {
  let params = {
    pageNo,
    pageSize,
    hasLoading: true,
    beginTime: data.beginTime,
    endTime: data.endTime,
    notifyState: data.notifyState,
    notifyType: data.notifyType,
    address: data.address,
    beeperId: data.beeperId,
  };
  HomeRequest.GetNotifyList(params)
    .then((res) => {
      paging.value.complete(res.data.list);
    })
    .catch((err) => {
      paging.value.complete(false);
    });
};

const onClose = (type: number) => {
  if (type === 1) {
    data.timeShow = false;
  } else {
    data.showPopup = false;
  }
};

const onPickerChange = (e: any) => {
  const { value } = e.detail.value;
  if (data.popupType === 1) {
    data.notifyState = value;
  } else {
    data.notifyType = value;
  }
  onClose(2);
};

const onPickerCancel = () => {
  onClose(2);
};

const onTimeConfirm = (event: any) => {
  const { year, month, day } = Tools.formatTimestampToDate(event.detail);
  if (data.timeSelect === 1) {
    data.beginTime = year + '-' + month + '-' + day;
  } else {
    data.endTime = year + '-' + month + '-' + day;
  }
  onClose(1);
};

//重置
const repeatChange = () => {
  data.address = '';
  data.notifyState = '';
  data.notifyType = '';
  data.beginTime = '';
  data.endTime = '';
};

//搜索
const searchChange = () => {
  paging.value.reload();
};

//进入详情
const goToDetail = (item: IGetNotifyDetail) => {
  navigate({ url: '/subcontract/home/notifyDetail/index?notifyId=' + item.notifyId });
};
</script>

<style lang="scss" scoped>
:deep(.van-search) {
  padding: 0;
}
</style>
